import React, { Component } from 'react'
import {Card,Icon, List} from 'antd'
import {reqIdCategorys} from '../../api'
import Linkbutton from '../../components/link-button'
import './detail.less'

import {BASE_IMG_PATH} from '../../utils/constant.js'

export class Detail extends Component {
  state={
    cname1:'',
    cname2:''
  }
  
  componentWillMount(){
     const {product} = this.props.location.state
    console.log('详情页面===>',product)
    this.product =  product
  }

  getCategory = async ()=>{
     const {pCategoryId,categoryId} = this.product
     if(pCategoryId==='0'){
      const res = await reqIdCategorys(categoryId)
      const cname1 = res.data.name
      this.setState({
        cname1
      })
     }else{
        // const result = await Promise.all([reqIdCategorys(pCategoryId),reqIdCategorys(categoryId)])
        //  console.log('同时发起异步请求 ===>',result)
        // const cname1= result[0].data.name
        // const cname2= result[1].data.name
        // this.setState({
        //   cname1,
        //   cname2
        // })

        const results = await Promise.all([reqIdCategorys(pCategoryId),reqIdCategorys(categoryId)])
      const cName1 = {} || results[0].data.name
      const cName2 =  {} || results[1].data.name
      this.setState({
        cName1,
        cName2
      })
     }
  }
  
  componentDidMount(){
    this.getCategory()
  }

  render() {
    
    const {cname1,cname2} = this.state
    const title = (
      <span>

      <Linkbutton onClick={()=>this.props.history.goBack()}>
      <Icon type="arrow-left" style={{fontSize:'20px',marginRight:'15px'}} />
      商品详情页
      </Linkbutton>
      </span>
    )
    return (
      <div>
      <Card title={title}>
        <List>
          <List.Item>
           <span className="detail-productname">商品名称:</span>
          <span style={{fontSize:20}}>{this.product.name}</span>
          </List.Item>
          <List.Item>
           <span className="detail-productname">商品描述:</span>
          <span style={{fontSize:20}}>{this.product.desc}</span>
          </List.Item>
          <List.Item>
           <span className="detail-productname">商品价格:</span>
          <span style={{fontSize:20}}>{this.product.price}元</span>
          </List.Item>
          <List.Item>
           <span className="detail-productname">所属分类:</span>
    <span style={{fontSize:20}}>{ cname1 + ( cname2? '---->'+cname2 : '')}</span>
          </List.Item>
          <List.Item>
           <span className="detail-productname">商品图片:</span>
          {
            this.product.imgs.map(img=>{
              return (
                <img src={BASE_IMG_PATH + img} alt="img"  key={img} style={{width:150,height:150}} />
              )
            })
          }
          </List.Item>
          <List.Item>
           <span className="detail-productname">商品详情:</span>
          <spn dangerouslySetInnerHTML={{__html:this.product.detail}}></spn>
          </List.Item>
        </List>
      </Card>
      </div>
    )
  }
}

export default Detail
